<template>
  <div class="lawyer-platform-diy">
    <div class="lawyer" v-for="(item, i) in listData" :key="i" :style="{ background: datas.template_bg }">
      <img :src="item.avatar_image"/>
      <div class="info" >
        <div style="flex: 1;">
          <div class="header">
            <span class="name" :style="{ color: datas.name_color }">{{ item.name }}</span>
            <span class="consult" @click="to('lawyer', item)"
            :style="{color:datas.consultation_color,backgroundColor:datas.consultation_bg,borderColor:datas.consultation_border_color,borderRadius:datas.consultation_radius + 'px'}">立即咨询</span>
          </div>
          <div class="lawyer-detail">
            <span :style="{ color: datas.job_color,backgroundColor:datas.job_bg,borderRadius:datas.job_radius+'px' ,marginRight:'0.3125rem'}">{{ item.title }}</span>
            <span  :style="{ color: datas.year_color,backgroundColor:datas.year_bg,borderRadius:datas.year_radius+'px' }">执业{{ item.year }}年</span>
          </div>
          <div class="nick-name-list">
            <span class="domain-nickName" v-for="(category, index) in item.category_data" :key="index"
              :style="{ borderRadius: datas.box_radius + 'px',color:datas.field_color }">{{
                category.title
              }}<span v-if=" index+1!== item.category_data.length " class="right-line"  :style="{  background: datas.field_color }"></span></span>
          </div>
          <div class="footer" @click.stop="to('office', item)">
            <div class="lawfirm">
              <span class="city" :style="{ color: datas.city_color }">{{ item.city_name }} <span class="city-line" :style="{background: datas.city_color}" ></span></span>

              <span :style="{ color: datas.office_color }">
                <template v-if="lawfirmName" :style="{ color: datas.office_color }">{{ lawfirmName }}</template>
                <template v-else> {{ item.lawyer_firm ? item.lawyer_firm.name : "" }} </template>
              </span>
            </div>
            <div  :style="{ color: datas.distance_color }" style="flex-shrink: 0;">{{ item.distance }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["isBottom", "lastIndex", "index", "page_id", "id", "datas", "component_key", "tabcontrol", "isLast", "plugin_active", "childComponent", "childStyle", "leftShow"],
  data() {
    return {
      listData: [],
      point: {
        lng: "",
        lat: ""
      },
      path: ""
    };
  },
  mounted() {
    this.path = this.$route.path;
    this.get_my_loaction()
    this.getData();
  },
  activated() {
    this.get_my_loaction()
    this.getData();
  },
  methods: {
    get_my_loaction() {
      if (JSON.parse(localStorage.getItem("myLocation"))) {
        let myLocation = JSON.parse(localStorage.getItem("myLocation"));
        this.point = myLocation.point
      } else {
        this.fun
          .getLocation()
          .then(res => {
            this.point.lng = res.point.lng;
            this.point.lat = res.point.lat;
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    to(type, data) {
      if (type == "lawyer") {
        this.$router.push(this.fun.getUrl("lawyerDetail", { id: data.id }, { order_type: "lawyer" }));
      } else {
        this.$router.push(this.fun.getUrl("lawyerDetail", { id: data.lf_id }, { order_type: "office" }));
      }
    },
    getData() {
      $http.post('plugin.lawyer-platform.frontend.controllers.lawyer.getLawyerList', { ...this.point, decorate_total: this.datas.get_number, distance_type: 1 }).then(res => {
        if (res.result == 1) {
          let arr = res.data.list;
          this.listData = arr
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.lawyer-platform-diy {
  padding: 0.9375rem;

  .consult {
    font-size: 0.6563rem;
    text-align: center;
    width: 3.9063rem;
    height: 1.25rem;
    line-height: 1.25rem;
    border: 1px solid #1b1b1d;
    border-radius: 0.625rem;
  }

  .nick-name-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.4688rem;
  }

  .lawyer {
    display: flex;
    align-items: flex-start;
    padding: 0.625rem;
    margin-bottom: 0.625rem;
    border-radius: 0.625rem;
    box-shadow: 2px 3px 8px rgba(61, 61, 61, 0.25);
  }

  img {
    margin: 0 0.328rem 0 0;
    width: 5.4063rem;
    height: 5.4063rem;
    border-radius: 0.1875rem;
    object-fit: cover;
    border: 1px solid #fff;
  }
}

.lawfirm {
  font-size: 0.75rem;
  margin-right: 1.3rem;

  .city {
    position: relative;
    margin-right: 0.1563rem;
    padding-right: 0.1563rem;
  }

  .city-line {
    position: absolute;
    width: 1px;
    height: 10px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
}

.header {
  display: flex;
  justify-content: space-between;
}

.name {
  font-size: 1.1428rem;
}

.btn {
  position: fixed;
  width: 100vw;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0 -2px 7px 0 rgba(213, 213, 213, 0.59);
  padding: 0.5714rem 1.7857rem;

  ::v-deep .van-button--normal {
    width: 100%;
    border-radius: 0.3571rem;
  }
}

.mr-1 {
  margin-right: 1rem;
}

.domain-nickName {
  position: relative;
  margin-right: 0.3125rem;
  padding-right: 0.3125rem;
  font-size: 0.75rem;

  .right-line {
    position: absolute;
    width: 1px;
    height: 60%;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.flex {
  display: flex;
}

.between {
  justify-content: space-between;
}

::v-deep .van-tabs__line {
  background-color: #daa032;
}

::v-deep .van-tab--active {
  color: #daa032 !important;
}

.operators {
  background-color: #fff;
  height: 100%;
  padding-bottom: 5rem;
}

.info {
  width: 100%;
  text-align: left;
  display: flex;
  // flex-direction: column;
  justify-content: space-between;
}

.c-6b6b6b {
  color: #6b6b6b;
}

.contact-way {
  color: #6b6b6b;
  font-size: 0.8rem;
}

.title {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lawyer-title {
  color: #daa032;
  font-size: 0.857rem;
}

div.item {
  display: flex;
  padding-left: 0.714rem;
}

.lawyer-detail {
  margin-top: 0.4688rem;
  margin-bottom: 0.3438rem;
  display: flex;
  align-items: center;

  span {
    padding: 0.0625rem 0.3125rem;
    color: #fff;
    font-size: 0.75rem;
  }
}
</style>
